<template>
  <div class="recommended-view">
    <van-skeleton avatar-shape="square" :row="11" :loading="showLoading">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">

        <van-swipe :autoplay="3000" indicator-color="#fff">
          <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
            <img v-lazy="image.res_url[0]" />
          </van-swipe-item>
        </van-swipe>

        <div class="content">
          <masonry-view :DataArr="recommendedDataArr" :switchSelected="switchSelected" />

          <wd-infinite-load 
            ref="loadmore"
            @loadmore="loadmore"
            :offset="10"
            :immediate-check="false"
            :loading="loading"
          ></wd-infinite-load>
        </div>
      </van-pull-refresh>
    </van-skeleton>
  </div>
</template>

<script>
import { get_recommended, get_advertising } from "@/apis/http.js"; //首先，引入http.js中暴露的获取用户的方法
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";
export default {
  name: "RecommendedView", //推荐页
  components: { MasonryView },
  data() {
    return {
      time: 5,
      loading: false,
      showLoading: true,
      isLoading: false,
      recommendedDataArr: [],
      advertisingData: []
    };
  },

  mounted() {
    this.getNewRecommended();
    this.getAdvertising();
  },

  methods: {
    //第二步  在自定义方法中调用get_users方法，通过async和awit搭配直接获取到数据
    async getNewRecommended() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_recommended();
      // console.log(res); 这样就获取到了请求的所有数据！
      this.recommendedDataArr = res.list;
      console.log(this.recommendedDataArr);
      // console.log(this.recommendedDataArr);
      this.showLoading = false;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getRecommended() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_recommended();
      // console.log(res); 这样就获取到了请求的所有数据！
      this.recommendedDataArr.push(...res.list);
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getAdvertising() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let data = await get_advertising({
        category: "EXPLOREBANNER",
        extJson: '{"domainId":"-1000"}'
      });
      // console.log(data); //这样就获取到了请求的所有数据！
      this.advertisingData = data[0].ads;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    switchSelected(id, src) {
      this.$nextTick(() => {
        this.recommendedDataArr.forEach(r => {
          if (r.itemId === id) {
            if (r.postData.postCount.viewCount == 1) {
              r.postData.postCount.viewCount = 0;
              r.postData.postCount.favoriteCount -= 1;
            } else {
              r.postData.postCount.viewCount = 1;
              r.postData.postCount.favoriteCount += 1;
            }
          }
        });

        this.$store.commit("toggleMyLike", { id, src });
        // console.log(this.$store.state.myLike);
      });
    },

    onRefresh() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.isLoading = false;
          this.getNewRecommended();
          this.$router.go(0);
        });
      }, 1000);
    },

    loadmore() {
      this.loading = true;

      if (this.time) {
        setTimeout(() => {
          this.getRecommended();
          this.loading = false;
          // 模拟请求，请求3次，3次结束后设置加载结束
          this.time--;
        }, 1000);
      } else {
        this.$refs.loadmore.loadEnd();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.recommended-view {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(255, 255, 255);

  img {
    width: 100%;
    height: 100%;
  }

  .content {
    width: 98vw;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 55px;
  }
}
</style>